<template>
	<view class="main">
		<view class="tit"><text>*</text>任务名</view>
		<input v-model="title" placeholder="随意取个名字吧" />
		<view class="tit"><text>*</text>主页链接</view>
		<textarea v-model="url" placeholder="多个博主主页链接，可用回车或者逗号隔开"></textarea>
		<view class="tips">抖音app博主首页分享链接：https://v.douyin.com/NhNj8wB/</view>
		<view class="tit"><text>*</text>长尾词</view>
		<textarea v-model="keywords" placeholder="多个长尾词，可用回车或者逗号隔开"></textarea>
		<view class="tips">例如：北京二手车，北京哪里买车</view>
		<view class="subBtn" @click="toSubmit">确定</view>
	</view>
</template>

<script>
	import {
		rankAdd
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				title:'',
				url:'',
				keywords:'',
			};
		},
		methods:{
			async toSubmit(){
				if(this.title==''){
					uni.showToast({
						title:'请输入任务名',
						icon:'error'
					})
					return false
				}
				if(this.url==''){
					uni.showToast({
						title:'请输入主页链接',
						icon:'error'
					})
					return false
				}
				if(this.keywords==''){
					uni.showToast({
						title:'长尾词',
						icon:'error'
					})
					return false
				}
				let obj = {
					'row[title]':this.title,
					'row[url]':this.url,
					'row[keywords]':this.keywords,
				}
				const result = await rankAdd(obj)
				if(result.code==1){
					uni.showToast({
						title:'添加成功',
					})
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}else{
					uni.showToast({
						title:result.msg,
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-top: 15rpx;
		background: white;
		padding: 7rpx 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.tit {
			font-size: 28rpx;
			margin: 17rpx 0;

			text {
				color: #FF0000;
			}
		}

		input {
			padding: 14rpx 15rpx;
			font-size: 20rpx;
			border: solid 1rpx #707070;
			border-radius: 10rpx;
		}
		textarea {
			border: solid 1rpx #707070;
			padding: 15rpx 9rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
		}
		.btns {
			margin: 20rpx 40rpx;

			view {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				justify-content: center;
				color: white;
				text-align: center;
			}

			.btn-item1 {
				background: #DD4E3D;
			}

			.btn-item2 {
				background: #5D9CEB;
			}

			text {
				margin-left: 10rpx;
			}
		}
		.btns2{
			margin: 20rpx 0;
			view{
				width: 200rpx;
			}
		}

		.tips {
			font-size: 20rpx;
			margin: 15rpx 0;
		}
		.subBtn{
			font-size: 30rpx;
			color: white;
			padding: 8rpx 95rpx;
			background: #5D9CEB;
			width: fit-content;
			margin: 137rpx auto;
			border-radius: 10rpx;
		}
	}
</style>
